/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState } from 'react';
import { Row, Col, Typography } from 'antd';
import { connect } from 'dva';
import { setLStorage } from '@/utils/utils';
import { isArray } from 'lodash';
import WrapperCharts from './components/WrapperCharts';
import styles from './style.less';

const { Title: AntTitle } = Typography;

const Title = ({ children, className }) => <div className={className}>{children}</div>;

const Statistics = ({ dispatch, inOutNumber, sendAndRate, router, dataLoading }) => {
  const [hasAuth, setAuth] = useState(false);
  const { cm_id, _token, cm_name } = router.location.query;
  const real_cm_id = isArray(cm_id) ? cm_id[0] : cm_id;

  useEffect(
    () => {
      if (_token) {
        _token && setLStorage(real_cm_id, _token);
        setAuth(true);
        dispatch({
          type: 'list/yzYesterdayData',
          payload: {
            cm_id: real_cm_id,
            _token,
            area_id: '',
            source: 'yz_h5',
          },
        });
      } else {
        setAuth(false);
      }
    },
    [real_cm_id, _token],
  );

  if (!hasAuth) {
    return <AntTitle className={styles.noAuth}>暂无权限</AntTitle>;
  }

  return (
    <div>
      <Title className={styles.stationWrapper}>
        站点：
        {cm_name ? decodeURIComponent(cm_name) : ''}
      </Title>
      <Title className={styles.title}>昨日数据总览</Title>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            name="inOutNumber"
            chartType="overview"
            chartData={inOutNumber}
            className={styles.card}
            loading={dataLoading}
            source="yz_h5"
          />
        </Col>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            name="sendAndRate"
            chartType="overview"
            chartData={sendAndRate}
            className={styles.card}
            loading={dataLoading}
            source="yz_h5"
          />
        </Col>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="pies"
            name="storagePic"
            title="入库品牌占比"
            numType="in_num"
            cm_id={real_cm_id}
            className={styles.card}
            source="yz_h5"
          />
        </Col>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="pies"
            name="outPic"
            title="寄件品牌占比"
            numType="order_num"
            cm_id={real_cm_id}
            className={styles.card}
            source="yz_h5"
          />
        </Col>
      </Row>
      <Title className={styles.title}>近七天数据对比</Title>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="storageSummary"
            title="出入库数"
            numType="out_num"
            fields={['in_num', 'out_num', 'back_num']}
            cm_id={real_cm_id}
            className={styles.card}
            source="yz_h5"
          />
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="storageRate"
            title="出库率"
            fields={['outStorageRate']}
            cm_id={real_cm_id}
            className={styles.card}
            cols={{
              temperature: {
                type: 'linear',
                min: 0,
                formatter: value => `${value}`,
              },
            }}
            source="yz_h5"
          />
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="complaintRate"
            title="投诉率"
            fields={['complaintRate']}
            cm_id={real_cm_id}
            className={styles.card}
            cols={{
              temperature: {
                type: 'linear',
                min: 0,
                formatter: value => `${value}`,
              },
            }}
            source="yz_h5"
          />
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="smsSummary"
            title="短信数"
            fields={['sms_num']}
            cm_id={real_cm_id}
            className={styles.card}
            cols={{
              temperature: {
                type: 'linear',
                min: 0,
              },
            }}
            source="yz_h5"
          />
        </Col>
      </Row>
      <Row>
        <Col xs={24} sm={24} md={24} lg={24} xl={8} xxl={8}>
          <WrapperCharts
            chartType="chart"
            name="orderSummary"
            title="寄件订单数"
            fields={['num', 'real_num']}
            cm_id={real_cm_id}
            className={styles.card}
            source="yz_h5"
          />
        </Col>
      </Row>
      <Row className={styles.tips} gutter={[0, 5]}>
        <Col>如何订阅该消息：</Col>
        <Col>1. 微信关注‘快宝驿站’公众号并绑定手机号；</Col>
        <Col>
          2. 登录快宝智慧快递管理平台网页，在快宝驿站-设置和管理-报表数据推送设置中，添加该手机号。
        </Col>
      </Row>
    </div>
  );
};

export default connect(({ list, router, loading }) => ({
  router,
  inOutNumber: list.inOutNumber,
  sendAndRate: list.sendAndRate,
  stationAndFans: list.stationAndFans,
  inNumRank: list.inNumRank,
  outRateRank: list.outRateRank,
  dataLoading: loading.effects['list/yesterdaData'],
  listLoading: loading.effects['list/regionalRanking'],
}))(React.memo(Statistics));
